<template>
  <div v-if="myLikeInfoList.length > 0" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-7">
    <div v-for="voice in myLikeInfoList" :key="voice.id"
      class="h-28 voice-item bg-white shadow-md rounded-lg overflow-hidden transition-all transform hover:scale-105 hover:shadow-lg">
      <!-- 语音包信息 -->
      <div class="p-3 bg-gray-50">
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img :src="voice.packageAvatar || 'https://via.placeholder.com/50'" alt="Package Avatar"
              class="w-6 h-6 rounded-full mr-2" />
            <p class="text-sm text-gray-600">{{ voice.packageName }}</p>
          </div>
          <button class="text-blue-500 hover:text-blue-700 text-sm"
            @click="goToVoicePackageDetail(voice.packageId)">查看详情</button>
        </div>
        <div class="mt-2">
          <VoiceSignCard :voiceSign="voice" />
        </div>
      </div>
      
    </div>
  </div>

  <!-- 无数据提示 -->
  <div v-else class="text-center text-gray-500">
    <p>暂无语音数据</p>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { getMyLike } from '@renderer/api/voice';

  import { useRouter } from 'vue-router'
  const router = useRouter()

  const myLikeInfoList = ref([]);
  const playingVoice = ref < number | null > (null);

  onMounted(() => {
    getMyLikeList();
  });

  const getMyLikeList = async () => {
    const response = await getMyLike();
    console.log(response);
    myLikeInfoList.value = response.data;
  };

  const goToVoicePackageDetail = (id: number | string) => {
    let scrollValue = document.querySelector('#main')?.scrollTop
    router.push({ path: '/voicePackageDetail', query: { id: id, scrollValue } })
  }
  // 播放语音
  const playVoice = (voiceUrl: string) => {
    const audio = new Audio(voiceUrl);
    audio.play();
    playingVoice.value = audio.id;
  };
</script>

<style scoped>
  .voice-item {
    transition: all 0.3s ease;
  }

  .voice-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }

  button {
    transition: all 0.2s ease;
  }

  button:hover {
    color: #2563eb;
  }

  .custom-player {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    background: #f3f4f6;
    /* Light gray background */
  }

  .custom-player:hover {
    background: #e5e7eb;
    /* Slightly darker gray on hover */
  }

  .custom-player button {
    background-color: #2563eb;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    transition: background-color 0.3s ease;
  }

  .custom-player button:hover {
    background-color: #1d4ed8;
  }

  .custom-player .playing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 20px;
    font-weight: bold;
  }
</style>